<div class="table-tabs">
  <div class="table-tab" [routerLink]="['/main/table/table-list']" [ngClass]="{'tab-active': navName == 'tableList'}">桌台</div>
  <div class="table-tab" [routerLink]="['/main/table/change-table']" [ngClass]="{'tab-active': navName == 'changeTable'}">换台记录</div>
  <div class="table-tab" [routerLink]="['/main/table/combine-table']" [ngClass]="{'tab-active': navName == 'combineTable'}">并台记录</div>
  <div class="table-tab" style="position: relative"  [ngClass]="{'tab-active': navName == 'reserve'}" (click)="changState($event)">
    预定
    <div style="position: absolute;top:30px;right: 10px;background: #147baf; color: #fff;border-radius: 2px;font-size: 0.9em;z-index: 9999" *ngIf="showState">
      <div style="padding: 0 8px;height: 3.5em;line-height: 3.5em;" [routerLink]="['/main/table/reserve-submit']">添加预定</div>
      <div style="padding: 0 8px;height: 3.5em;line-height: 3.5em;" [routerLink]="['/main/table/reserve-list']">预定列表</div>
    </div>
  </div>
</div>
